/**
 * Created by lenovo on 2019/10/1.
 */

$(document).ready(function () {
    $('.col-md-3').each(function () {
        animationHover(this, 'pulse');
    });
});


$('#myCarousel').carousel({
    interval: 2000
})

// 轮播
//t代表banner切换的时间间隔；int代表banner渐变的时长；auto代表banner是否自动播放
function Banner(_t, _int, _auto) {
    this.bannerContainer = null;
    this.bannerBox = null;
    this.allBannerItem = null;
    this.bannerIndexBox = null;
    this.allBannerIndexItem = null;
    this.bannerInt = null;
    this.index = 0;
    this._t = _t;
    this._int = _int;
    this._auto = _auto;
    this.canChange = true;
}
Banner.prototype = {
    constructor: Banner,
    getElement: function () {
        this.bannerContainer = document.getElementsByClassName("banner_container")[0];
        this.bannerBox = document.getElementById("banner-box");
        this.allBannerItem = this.bannerBox.getElementsByTagName("li");
        this.bannerIndexBox = document.getElementById("banner-index-box");
        this.allBannerIndexItem = this.bannerIndexBox.getElementsByTagName("li");
    },
    bannerInit: function () {
        this.getElement();
        this.bannerWidthInit();
        (this._auto) && (this.bannerAutoPlay());
        this.bannerIndexClick();
    },
    bannerWidthInit: function () {
        var that = this;
        that.setBannerWidth();
        window.onresize = function () {
            that.setBannerWidth();
        };
    },
    setBannerWidth: function () {
        var windowW = document.documentElement.clientWidth;
        if (windowW < 1000) {
            this.bannerContainer.style.height = 1000 / 3 + "px";
        } else {
            this.bannerContainer.style.height = windowW / 3 + "px";
        }
    },
    bannerChange: function (index, nextIndex) {
        var that = this;
        if (that.canChange) {
            that.canChange = false;
            var item = that.allBannerItem;
            item[nextIndex].style.zIndex = "2";
            item[index].className += " banner-tran";
            item[index].style.opacity = "0";
            setTimeout(function () {
                item[nextIndex].style.zIndex = "3";
                item[index].style.zIndex = "1";
                item[index].className = item[index].className.replace(/\sbanner-tran/, "");
                item[index].style.opacity = "1";
                that.index = nextIndex;
                that.canChange = true;
            }, that._int);
        }
    },
    bannerAutoPlay: function () {
        var that = this;
        that.bannerInt = setInterval(function () {
            var nextIndex = that.index + 1 === that.allBannerItem.length ? 0 : that.index + 1;
            that.allBannerIndexItem[that.index].className = "";
            that.allBannerIndexItem[nextIndex].className = "banner-index-active";
            that.bannerChange(that.index, nextIndex);
        }, that._t);
    },
    bannerIndexClick: function () {
        var that = this;
        var item = that.allBannerIndexItem;
        for (var i = 0; i < item.length; i++) {
            item[i].index = i;
            item[i].addEventListener("click", function () {
                if (this.className.indexOf("banner-index-active") === -1 && that.canChange) {
                    clearInterval(that.bannerInt);
                    (that._auto) && (that.bannerAutoPlay());
                    document.getElementsByClassName("banner-index-active")[0].className = "";
                    this.className = "banner-index-active";
                    that.bannerChange(that.index, this.index);
                }
            })
        }
    }
};
var banner = new Banner(6000, 500, true);
banner.bannerInit();

$('#myCarousel').carousel({
    interval: 2000
})

